<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less"/>
    <link rel="stylesheet/less" href="./less/register.less"/>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">注册</div>
                    <a href="./mine.html">
                        <img src="./img/arrow_back.png">
                    </a>
                </header>
            </div>
            <div class="login-view">
                <ul>
                    <li>
                        <input type="number" maxlength="11" placeholder="请输入手机号码" v-model="username"/>
                        <img src="./img/phone.png"/>
                    </li>
                    <li>
                        <input type="number" placeholder="请输入验证码" v-model="usercode"/>
                        <img src="./img/validation.png"/>
                        <div  v-show="show" @click="getCode">发送验证码</div>
                        <div v-show="!show">{{count}}s</div>
                    </li>
                    <li>
                        <input type="password"  placeholder="请输入密码" v-model="userpassword"/>
                        <img src="./img/password.png"/>
                    </li>
                    <li>
                        <ul>
                            <li>邀请码</li>
                            <li>
                                <input type="text" placeholder="请输入邀请码" v-model="invitecode"/>
                            </li>
                        </ul>
                    </li>
                    <li @click="register">立即注册</li>
                    <li>
                        <a href="./login.html">密码登录</a>
                    </li>
                </ul>
            </div>
            <div id="toast" v-show="totasStatus">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">注册成功</p>
                </div>
            </div>
            <div id="textToast" v-show="tooltip">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast weui-toast_text">
                    <p class="weui-toast__content">{{tooltipName}}</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="module">
    import { registerCode, register } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
            username: '',
            userpassword: '',
            usercode: '',
            invitecode: '',
            show: true,
            count: '',
            timer: null,
            totasStatus: false,
            tooltip: false,
            tooltipName: '',
        },
        mounted(){
            let that = this;
                that.public.shareLink();
        },
        methods:{
            getCode(){
                let that = this;
                if(that.username == ''){
                        
                    that.tooltip = true;
                    that.tooltipName = '手机号不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(!(/^1[3|4|5|7|8|9]\d{9}$/.test(that.username))){ 
                    
                    that.tooltip = true;
                    that.tooltipName = '手机号输入错误';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false; 
                }else{
                    const TIME_COUNT = 60;
                    if (!that.timer) {
                        that.count = TIME_COUNT;
                        that.show = false;
                        that.timer = setInterval(() => {
                        if (that.count > 0 && that.count <= TIME_COUNT) {
                            that.count--;
                            } else {
                            that.show = true;
                            clearInterval(that.timer);
                            that.timer = null;
                            }
                        }, 1000)
                    }

                    registerCode({
                        account: that.username
                    }).then(res=>{
                        that.totasStatus = true;
                        that.toastName = res.msg;  
                        setTimeout(()=>{
                            that.totasStatus = false;
                        },2000)
                        return false;
                    }).catch(error=>{
                        console.log(error);
                    })
                }
            },
            
            register(){
                let that = this;

                if(that.username == ''){
                        
                        that.tooltip = true;
                        that.tooltipName = '手机号不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                   }else if(!(/^1[3|4|5|7|8|9]\d{9}$/.test(that.username))){ 
                        
                        that.tooltip = true;
                        that.tooltipName = '手机号输入错误';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false; 
                    }else if(that.userpassword == ''){

                        that.tooltip = true;
                        that.tooltipName = '密码不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                   }else if(that.usercode == ''){
                        
                        that.tooltip = true;
                        that.tooltipName = '验证码不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                   }else if(!(/^\d{6}$/.test(that.usercode))){

                        that.tooltip = true;
                        that.tooltipName = '验证码输入错误';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false; 
                    
                   }else if(that.invitecode == ''){
                        
                        that.tooltip = true;
                        that.tooltipName = '邀请码不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                   }else{
                    register({
                        account: that.username,
                        loginPwd: that.userpassword,
                        smsCode: that.usercode,
                        beInviteCode: that.invitecode,
                        sourceRegistration: '3'
                    }).then(res=>{
                        if(res.code !=0){
                            that.tooltip = true;
                            that.tooltipName = res.msg;  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false; 
                         }  
                        if(res.code==0){
                            that.totasStatus = true;
                            setTimeout(()=>{
                                that.totasStatus = false;
                                window.location.href='./login.html';
                            },2000)
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }
            },
        },
    })
</script>